<template>
	<view class="">
		<view class="wrap">
			<view class="tit dis">
				预约类型：<uni-data-checkbox selectedColor="#819453" @change="changeType" v-model="typeReservation" :localdata="typeList" />
			</view>
			
		</view>
		
		<view class="wrap">
			<view class="tit">
					选择日期
				</view>
				<view class="content">
					<view class="changeTime-list dis">
						<view class="changeTime-msg" :class="changeTimeIndex==index?'activeChangeTimeBtn':''"
							@click="changeTimeBtn(item,index)" v-for="(item,index) in dateList" :key="index">
							<view class="changeTime-msg-up">
								<!-- {{item.nowDate}} -->
								{{item.nowDate.slice(5)}}
							</view>
							<view class="changeTime-msg-bom">
								{{item.week}}
							</view>
						</view>
						<view class="changeTime-msg " @click="timeBtn(6)"
							:class="changeTimeIndex==6?'activeChangeTimeBtn':''">
							<uni-datetime-picker @change="timeChange" :start="nowDate" type="date" v-model="single">
								<view class="changeTime-msg-up">
									<image src="@/static/com/icon_qd.png" mode=""></image>
								</view>
								<view class="changeTime-msg-bom">
									更多日期
								</view>
			
							</uni-datetime-picker>
			
						</view>
					</view>
					<view class="" style="margin-top: 20rpx;" v-if="single!=''">
						选择的其他日期：{{single}}
					</view>
				</view>
			
			
			<view class="content">
				<view class="typeReservation" v-if="typeReservation==0">

					<view class="subtitleTit subtitleTit1 dis">
						添加游客：<view class=" bb " @click="addPeple(1)" style="border-radius: 50%;width: 54rpx;height: 58rpx;line-height: 50rpx;text-align: center;font-size: 40rpx;color: #fff;">
							+
						</view>
						<!-- <image @click="addPeple(1)" src="@/static/pagesA/icon_tj.png" mode=""></image> -->
					</view>
					<view class="block_2 flex-row " :class="activePepleIndex==index?'activePeple':''" v-for="(item,index) in pepleList" @click="activePepleBtn(item,index)">
						<!--  -->
						<view class="text-group_4 flex-col">
							<text class="text_19">{{item.name}}</text>
							<text class="text_20">{{item.phone}}</text>
						</view>
						<!-- <image src="sc" mode=""></image> -->
						<image class="label_1" @click.stop="deletePeple(item,index)" src="../../static/com/icon_sc.png" mode="">
						</image>
					</view>
					
					
					<view class="" v-if="false">
						<radio-group @change="radioChange">
							<label class="list-msg dis" v-for="(item, index) in pepleList" :key="item.value">
								<view class="list-msg-left">
									<view class="list-msg-left dis">
										<radio :value="item.name" :checked="index === current" />
										<view class="">
											<view>{{item.name}}</view>
											<!-- <view>{{item.phone}}</view> -->
											<view>{{item.idCard}}</view>
										</view>
									</view>

								</view>
								<view class="list-msg-right dis">
									<view class="list-msg-right-left" @click.stop="deletePeple(item,index)">删除</view>
									<view class="list-msg-right-left" @click="addPeple(index,'edit')">编辑</view>

								</view>


							</label>
						</radio-group>
					</view>

				</view>
				<view class="typeReservation" v-if="typeReservation==1">
					<view class="subtitleTit dis">
						团队名称：<uni-easyinput v-model="teadForm.name" placeholder="请输入团队名称" />
					</view>
					<view class="subtitleTit dis">
						人数：<uni-data-checkbox @change="updateCheckboxValue" v-model="txt" :localdata="pepleNumList" />
					</view>
					<view class="subtitleTit subtitleTit1 dis">
						<view class="dis" style="align-items: center;">讲解：<checkbox-group @change="speekBtn(1)">
								<view>
									<label>
										<checkbox value="isSpeek" checked="true" />需要
									</label>

								</view>


							</checkbox-group></view>
						<view>￥{{sppkPrice}}</view>

					</view>
					<!-- <view class="subtitleTit dis">

						
						<view class="dis" style="justify-content: space-between;">
							
							
						</view>



					</view> -->
					<view class="subtitleTit subtitleTit1 dis">
						添加团队负责人：<view class=" bb " @click="addPeple(2)" style="border-radius: 50%;width: 54rpx;height: 58rpx;line-height: 50rpx;text-align: center;font-size: 40rpx;color: #fff;">
							+
						</view>
						
					</view>
				<view class="block_2 flex-row " :class="activePepleIndex==index?'activePeple':''" v-for="(item,index) in pepleList" @click="activePepleBtn(item,index)">
					<!--  -->
					<view class="text-group_4 flex-col">
						<text class="text_19">{{item.name}}</text>
						<text class="text_20">{{item.phone}}</text>
					</view>
					<!-- <image src="sc" mode=""></image> -->
					<image class="label_1" @click.stop="deletePeple(item,index)" src="../../static/com/icon_sc.png" mode="">
					</image>
				</view>
					<view class="" v-if="false">
						<radio-group @change="radioChange">
							<label class="list-msg dis" v-for="(item, index) in pepleList" :key="item.value">
								<view class="list-msg-left">
									<view class="list-msg-left dis">
										<radio :value="item.name" :checked="index === current" />
										<view class="">
											<view>{{item.name}}</view>
											<!-- <view>{{item.phone}}</view> -->
											<view>{{item.idCard}}</view>
										</view>
									</view>

								</view>
								<view class="list-msg-right dis">
									<view class="list-msg-right-left" @click="deletePeple(item,index)">删除</view>
									<view class="list-msg-right-left" @click="addPeple(index,'edit')">编辑</view>

								</view>


							</label>
						</radio-group>
					</view>

				</view>
				<view class="typeReservation" v-if="typeReservation==2">

					<view class="subtitleTit subtitleTit1 dis">
						<view class="dis" style="align-items: center;">讲解：<checkbox-group @change="speekBtn(1)">
								<view>
									<label>
										<checkbox value="isSpeek" checked="true" />需要
									</label>

								</view>


							</checkbox-group></view>
						<view>￥{{sppkPrice}}</view>

					</view>
					<view class="subtitleTit subtitleTit1 dis">
						<!--  @click="addPeple('add')" -->
						添加租赁人：<view class=" bb " @click="addPeple(3)" style="border-radius: 50%;width: 54rpx;height: 58rpx;line-height: 50rpx;text-align: center;font-size: 40rpx;color: #fff;">
							+
						</view>
						
					</view>
					<view class="block_2 flex-row " :class="activePepleIndex==index?'activePeple':''" v-for="(item,index) in pepleList" @click="activePepleBtn(item,index)">
						<!--  -->
						<view class="text-group_4 flex-col">
							<text class="text_19">{{item.name}}</text>
							<text class="text_20">{{item.phone}}</text>
						</view>
						<!-- <image src="sc" mode=""></image> -->
						<image class="label_1" @click.stop="deletePeple(item,index)" src="../../static/com/icon_sc.png" mode="">
						</image>
					</view>
					
					<view class="" v-if="false">
						<radio-group @change="radioChange">
							<label class="list-msg dis" v-for="(item, index) in pepleList" :key="item.value">
								<view class="list-msg-left">
									<view class="list-msg-left dis">
										<radio :value="item.name" :checked="index === current" />
										<view class="">
											<view>{{item.name}}</view>
											<!-- <view>{{item.phone}}</view> -->
											<view>{{item.phone}}</view>
										</view>
									</view>

								</view>
								<view class="list-msg-right dis">
									<view class="list-msg-right-left" @click="deletePeple(item,index)">删除</view>
									<view class="list-msg-right-left" @click="addPeple(index,'edit')">编辑</view>

								</view>


							</label>
						</radio-group>
					</view>

				</view>

			</view>
		</view>


		<view class="wrap">
			<view class="tit">
				选择日期
			</view>
			<view class="content">
				<view class="time-list dis" v-if="dataInfo&&dataInfo.timeList&&dataInfo.timeList.length!=0">
					<view class="changeTime-msg" :style="{'background-color': item.isFull==true?'#f5f5f5':''}"
						:class="{activeChangeTimeBtn:selected[item.id]==true}" @click="onSelectClassify(item)"
						v-for="(item,index) in dataInfo.timeList" :key="index">
						<view class="changeTime-msg-up">
							<!-- {{item.nowDate}} -->
							{{item.time}}
						</view>
						<view class="changeTime-msg-bom">
							￥{{item.price}}
						</view>
					</view>

				</view>
				<view class="" v-else>
					所选时间没有时间段可预约，请选择其他日期
				</view>
				<view class="time-list-des dis" style="margin-top: 20rpx;">
					<view class="time-list-des  dis">
						<view class="time-list-des-left dis"></view>
						<view>可选</view>
					</view>
					<view class="time-list-des  dis">
						<view class="time-list-des-left bg"></view>
						<view>已售</view>
					</view>
					<view class="time-list-des  dis">
						<view class="time-list-des-left bg1"></view>
						<view>已选</view>
					</view>

				</view>
			</view>
		</view>
		<!-- {{preOrderNo}} -->
		<conpotList :preOrderNo="preOrderNo" @getCountId='getCountId'></conpotList>
		<view class="ding">

		</view>
		<view class="footer dis">
			<view class="">
				<view>合计：

					<text class="bc">￥{{totalPrice}}</text>
				</view>
				<view>会员优惠：
					<text class="bc">￥{{priceData.vipDiscountFee||0}}</text>
				</view>
				<view>优惠券优惠：
					<text class="bc">￥{{priceData.couponFee||0}}</text>
				</view>
			</view>
			<view class="footer-btn" @click="submit">
				立即支付
			</view>

		</view>
		<!-- <view class="" >
			点我
		</view> -->
		<uni-popup ref="addPeplePup" type="center">
			<view class="safeguardPup-wrap">

				<view class="safeguardPup-head safeguardPup-head1 dis">
					<view class="">

					</view>
					<view class="safeguardPup-head-center">人员信息</view>
					<view class="safeguardPup-head-right" @click="this.$refs.addPeplePup.close()">
						<image src="@/static/com/icon_close.png" mode=""></image>
					</view>
				</view>

				<view class="safeguardPup-msg dis">
					<uni-forms ref="baseForm" :modelValue="baseFormData">
						<uni-forms-item label="姓名" name="name" :labelWidth='90'>
							<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="手机号" name="phone" :labelWidth='90'>
							<uni-easyinput v-model="baseFormData.phone" placeholder="请输入手机号" />
						</uni-forms-item>
						<uni-forms-item label="身份证号" :labelWidth='90'>
							<uni-easyinput v-model="baseFormData.idCard" placeholder="请输入身份证号" />

						</uni-forms-item>
					</uni-forms>
					<view class="safeguardPup-btn">
						<view @click="this.$refs.addPeplePup.close()">取消</view>
						<view class="safeguardPup-btn-s" @click="addPepleBtn()">确定</view>
					</view>

				</view>

			</view>

		</uni-popup>


		<payment :payMode='payMode' :pay_close="pay_close" :types="scene" @onChangeFun='onChangeFun' :order_id="orderNo"
			:totalPrice='allPrice'></payment>
	</view>
</template>

<script>
	import {
		book,
		getBookDetail,
		getDoctorDetail,
		addVisitor,
		getVisitor,
		delVisitor
	} from '@/api/togeterRich/family.js'
	import {

		getUserInfo,

	} from "@/api/user";
	import payment from '@/components/payment/index.vue'
	import {
		conpotList
	} from '@/components/coupotList/index.vue'
	import {
		getQueryVenueConfig,
		getvenueOrderComputedPrice,
		getvenueOrderCreate
	} from '@/api/togeterRich/index.js'
	export default {
		components: {
			conpotList,
			payment
		},
		data() {
			return {
				preOrderNo: '0',
				orderNo: '',
				scene: '',
				pay_close: false,
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						number: 0
					}
				],
				txt: 0,
				priceData: {
					vipDiscountFee: 0,
					couponFee: 0
				},
				timeIdList: [],
				teamSppk: '',
				dataInfo: {},
				gid: '',
				today: '',
				totalPrice: 0,
				sppkPrice: 0,
				isSpeek: true,
				teadForm: {
					name: '',
					num: ''

				},
				current: 0,

				pepleList: [],
				baseFormData: {
					name: '',
					phone: '',
					idCard: ''
				},
				typeReservation: 0,

				pepleNumList: [],

				typeList: [{
					text: '个人',
					value: 0
				}, {
					text: '团队',
					value: 1
				}, {
					text: '场地',
					value: 2
				}],
				changeTimeIndex: 0,
				nowDate: '',
				single: '',
				dateList: [],
				classifyList: [],
				selected: {}, //选取的分类 ,用对象更方便存取数据
				proleTyp: '',
				couponId: '',
				lxrArr: [],
				activePepleIndex: 0,
				visitorData:[]
			}
		},
		onLoad(e) {
			this.gid = e.id
			this.get7Days()
			this.oneDay = this.dateList[0].nowDate
			this.init()
			// this.computedPrice()

		},
		methods: {
			cxrs(){
				let data={
					visitorType:6
				}
				getVisitor(data).then(res=>{
					this.pepleList=res.data
					this.visitorData = this.pepleList[0]
					// console.log(res,'wojom')
				})
				console.log("查询人数")
			},
			activePepleBtn(item, index) {
				this.visitorData = item
				this.activePepleIndex = index
			},
			numBtn() {

				let data = {
					name: '',
					phone: '',
					idCard: ''
				}
				this.lxrArr.push(data)
				// if (this.lxrArr.length >= this.dataInfo.personLimit) {
				// 	uni.showToast({
				// 		title: '您最多只能添加' + this.dataInfo.personLimit + '个',
				// 		icon: 'none'
				// 	})
				// } else {
				// 	this.lxrArr.push(data)
				// }
				// this.computedPrice()
				console.log(this.lxrArr, 'd')
			},
			delLxr(item, index) {
				this.lxrArr.splice(index, 1)
				// this.computedPrice()
			},
			getCountId(e) {
				this.couponId = e
				console.log(this.couponId, 'couponIdcouponId')
			},
			// 人数
			updateCheckboxValue(e) {

				this.teadForm.num = e.detail.data.text

			},
			computedPrice() {
				let data = {}
				if (this.typeReservation == 0) {
					data = {
						bookType: this.typeReservation + 1,
						couponId: this.couponId,
						needExplain: false,
						timeIdList: this.timeIdList
					}
				} else if (this.typeReservation == 1) {
					data = {
						bookType: this.typeReservation + 1,
						couponId: this.couponId,
						needExplain: this.isSpeek,
						txt: this.teadForm.num,
						timeIdList: this.timeIdList
					}

				} else if (this.typeReservation == 2) {
					data = {
						bookType: this.typeReservation + 1,
						couponId: this.couponId,
						needExplain: this.isSpeek,
						timeIdList: this.timeIdList,

					}
				}

				getvenueOrderComputedPrice(data).then(res => {
					this.priceData = res.data
					this.totalPrice = this.priceData.payFee
					this.preOrderNo = this.priceData.preOrderNo
					console.log("计算价格")
					// this.totalPrice={}
				})
			},
			init() {
				getUserInfo().then(res => {
					this.payMode[1].number = res.data.nowMoney

				})
				let data = {
					bookType: this.typeReservation + 1,
					date: this.oneDay,
					id: this.gid
				}
				console.log(data)
				getQueryVenueConfig(data).then(res => {
					console.log(res, 'ddd')
					if (res.data && res.data.length != 0) {
						this.dataInfo = res.data[0]
						this.classifyList = res.data[0].timeList
						this.pepleNumList = res.data[0].teamConfig
						this.teadForm.num = this.pepleNumList[0].text
						this.txt = this.pepleNumList[0].value
						this.sppkPrice = this.dataInfo.placePrice
					} else {
						this.dataInfo = []
						this.classifyList = []
						this.pepleNumList = []
						this.teadForm.num = 0
						this.txt = 0
						this.sppkPrice = 0
					}

				})
				this.cxrs()
			},
			payClose: function() {
				this.pay_close = false;
			},
			goPay(pay_price, order_id) {
				this.$set(this, 'pay_close', true);
				this.$set(this, 'pay_order_id', order_id);
				this.$set(this, 'totalPrice', pay_price);

			},
			onChangeFun(e) {
				if (e.data == true) {
					uni.showModal({
						title: '支付成功',
						content: '支付成功',
						cancelText: "返回首页", // 取消按钮的文字  
						confirmText: "查看订单", // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#39B54A',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({

									url: '/pagesB/venueReservation/index?status=10'
								});
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								});
								console.log('cancel') //点击取消之后执行的代码
							}
						}
					})
				} else {
					this.$set(this, 'pay_close', false);
				}

			},


			submit() {
				let data = {}


				data = {
					payChannel: 'routine',
					payType: "yue",
					bookType: this.typeReservation + 1,
					couponId: this.couponId,

					venueId: this.gid,
					timeIdList: this.timeIdList,

					userList: [this.visitorData]
				}
				if (this.typeReservation == 0) {

				} else if (this.typeReservation == 1) {
					data.needExplain = this.isSpeek
					data.txt = this.teadForm.num
					data.userList.map(res => {
						this.$set(res, 'teamName', this.teadForm.name)
					})


				} else if (this.typeReservation == 2) {
					data.needExplain = this.isSpeek

				}
				console.log(data, '第二部分为')
				getvenueOrderCreate(data).then(res => {
					console.log(res, 'SHENGCHENGDINGDAN')
					this.orderNo = res.data.orderNo
					this.scene = res.data.scene


					this.goPay()
				})
				console.log(data)

			},

			changeType() {
				this.activePepleIndex=0
				
				this.totalPrice = 0
				this.baseFormData={
					name: '',
					phone: '',
					idCard: ''
				},
				this.priceData.vipDiscountFee = 0
				this.priceData.couponFee = 0

				this.selected = []
				console.log(this.selected, 'selectedselected')
				this.lxrArr = []
				this.init()
			},
			speekBtn() {

				this.isSpeek = !this.isSpeek
			},
			editPeple(item) {

				this.baseFormData = item
				this.$refs.addPeplePup.open()
				console.log(item, '编辑')
			},
			deletePeple(item, index) {
				
				let data = {
					id: item.id,
					visitorType:6
				
				}
				delVisitor(data).then(res => {
					this.cxrs()
				})
				return;
				let that = this

				uni.showModal({
					title: '提示',
					content: '确定要删除吗',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.pepleList.splice(index, 1)
						}
						console.log(res, '大度点')
					},
					fail: () => {},
					complete: () => {}
				});
				console.log(item, index, '删除')
			},

			radioChange: function(evt) {
				console.log(evt, 'tytttttt')
				for (let i = 0; i < this.pepleList.length; i++) {
					if (this.pepleList[i].name === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			addPepleBtn() {
				
				this.baseFormData.type=this.proleTyp
				console.log(this.baseFormData,'表格数据')
				console.log(this.proleTyp,'this.proleTyp')
				// console.log(data,'tijiaode suju ')
				this.baseFormData.visitorType=6
				
				addVisitor(this.baseFormData).then(res=>{
					console.log(res,'eeee')
					uni.showToast({
						title:"添加成功",
						icon:'none'
					})
					this.$refs.addPeplePup.close()
					this.cxrs()
				})
				return;
				if (this.proleTyp == 'edit') {
					console.log(this.current, 'currentcurrent')
					console.log(this.baseFormData, '搜集的庶几乎')
					console.log(this.proleTyp, 'proleTypproleTyp')
				} else {

					if (this.pepleList.length < 5) {
						this.pepleList.push(this.baseFormData)
					} else {
						uni.showToast({
							title: "最多可添加5个",
							icon: 'none'
						})
					}
				}

				this.$refs.addPeplePup.close()

			},
			addPeple(type) {
				this.proleTyp = type
				// if (type == 'edit') {
				// 	this.baseFormData = this.pepleList[index]
				// } else {
				// 	this.baseFormData = {
				// 		realName: '',
				// 		phone: '',
				// 		certNo: ''
				// 	}
				// }
				this.$refs.addPeplePup.open()
			},
			onConfirmFiltrate() {
				let select = [] //选择的筛选结果数组
				const {
					classifyList,
					selected
				} = this

				//Object.keys循环遍历对象,如果值为true,就对比所有分类数组,拿到选择的筛选数据
				Object.keys(selected).forEach(key => {
					if (selected[key]) {
						for (let i = 0; i < classifyList.length; i += 1) {
							classifyList[i].id == key ? select.push(classifyList[i].id) : ''
						}

					}

				})
				this.timeIdList = select
				this.computedPrice()
				console.log(select, "选择结果数组-----");
			},
			onSelectClassify(item) {
				if (item.isFull == true) {
					uni.showToast({
						title: "该时间段已售，请重新选择",
						icon: 'none',
						duration: 2000
					})
				} else {
					this.$set(this.selected, item.id, !this.selected[item.id]) //动态更新视图数据
					// @click="onConfirmFiltrate"
					this.onConfirmFiltrate()
				}

			},
			timeChange() {
				this.changeTimeIndex = 6
				this.oneDay = this.single
				this.init()
			},
			timeBtn(index) {
				this.changeTimeIndex = index
			},
			changeTimeBtn(item, index) {
				this.single = ''
				console.log(item, 'lll')
				this.oneDay = item.nowDate
				this.init()
				this.changeTimeIndex = index
			},
			get7Days() {
				let list = []

				//获取系统当前时间
				var now = new Date();
				var nowTime = now.getTime();
				var oneDayTime = 24 * 60 * 60 * 1000;
				for (var i = 0; i < 7; i++) {
					let data = {
						date: '',
						week: ''
					}
					//显示周一
					var ShowTime = nowTime + i * oneDayTime;
					//                    var ShowTime = nowTime + (i+1)*oneDayTime ; 
					//初始化日期时间
					var myDate = new Date(ShowTime);
					var year = myDate.getFullYear();
					var month = myDate.getMonth() + 1;
					var date = myDate.getDate();
					// console.log(month + "-" + date, '这又是啥')
					var str = "星期" + "日一二三四五六".charAt(myDate.getDay());
					// console.log(str, '这些都是撒很')

					list.push({
						nowDate: year + '-' + month + "-" + date,

						week: str
					})
				}
				this.nowDate = list[0].nowDate
				this.dateList = list.splice(0, 5)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.bc{
			color: $maincolor !important;
		}
		.bgb{
			border: 2rpx solid $maincolor !important;
		}
		.bb{
			background: $maincolor;
		}
	.activePeple {
		border: 4rpx solid $maincolor !important;
		color: $maincolor !important;
	}
	.block_2{
		// width: 30%;
		// flex-wrap: wrap;
		padding: 0 20rpx;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		align-items: center;
		display: flex;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
	.listWrap {
		// padding: 30rpx;
		width: 100%;
		background: #fff;
		margin: 20rpx 0;
	}

	.list {


		height: 80rpx;
		display: flex;
		border-bottom: 1rpx solid #f5f5f5;
		align-items: center;

		.list-inp {
			input {
				padding: 30rpx;
			}
		}

		.list-img {
			width: 44rpx;
			height: 44rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 1;
		padding: 30rpx;
		align-items: center;
		justify-content: space-between;

		.footer-btn {

			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			background: $maincolor;
			text-align: center;
			color: #fff;
			padding: 0 100rpx;
		}
	}

	.list-msg {
		padding: 30rpx 0;
		border-bottom: 1rpx solid blue;
		align-items: center;
		justify-content: space-between;

		.list-msg-left {

			.list-msg-left {
				align-items: center;
			}
		}

		.list-msg-right {
			align-items: center;

			.list-msg-right-left {

				font-size: 26rpx;
				color: #333;
				margin-right: 10rpx;
			}
		}
	}

	.typeReservation {
		.subtitleTit1 {
			justify-content: space-between;
		}

		.subtitleTit {
			padding: 20rpx 0;
			border-bottom: 1px solid #f5f5f5;
			align-items: center;
			font-size: 24rpx;


			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.time-list-des {
		justify-content: space-between;
		font-size: 24rpx;
		align-items: center;

		.bg1 {
			background: $maincolor;
		}

		.bg {
			background: #f5f5f5;
		}

		.time-list-des-left {
			border: 1rpx solid #999;
			padding: 16rpx 50rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}
	}

	.time-list {
		flex-wrap: wrap;

		.changeTime-msg {
			margin: 10rpx;
			padding: 17px 40rpx;
			border: 2rpx solid #999;
			text-align: center;
			border-radius: 10rpx;

			.changeTime-msg-bom {
				font-size: 24rpx;
			}

			.changeTime-msg-up {
				font-size: 22rpx;
			}
		}
	}

	.activeChangeTimeBtn {
		color: #fff !important;
		background: $maincolor;
	}

	.changeTime-list {
		justify-content: space-between;

		.changeTime-msg {
			text-align: center;
			padding: 14rpx;
			border: 2rpx solid #999;
			color: #333;
			border-radius: 10rpx;

			.changeTime-msg-bom {
				font-size: 24rpx;
			}

			.changeTime-msg-up {
				image {
					width: 40rpx;
					height: 40rpx;

				}

				font-size: 28rpx;
			}
		}
	}

	.safeguardPup-wrap {
		.safeguardPup-msg {
			width: 80%;

			margin: 30rpx auto;
			justify-content: space-between;
			font-size: 28rpx;
			flex-direction: column;
			text-align: center;

			.safeguardPup-btn {
				width: 100%;

				display: flex;
				justify-content: space-around;
				align-items: center;

				.safeguardPup-btn-s {
					background: $maincolor;
					color: #fff;
				}

				view {
					padding: 10rpx 80rpx;
					border: 2rpx solid #999;
					border-radius: 100rpx;
				}
			}
		}

		.safeguardPup-head1 {
			justify-content: space-between;
			padding: 36rpx 36rpx 0 36rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}


		width: 600rpx;
		height: 600rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.wrap {
		margin-bottom: 20rpx;
		background: #fff;
		width: 100%;
		padding: 30rpx;

		.tit {
			font-size: 32rpx;
			color: #3D3D3D;
			align-items: center;
		}

		.content {
			margin: 20rpx 0;

		}
	}

	// @import 'com/pay.css';
	// @import '@/com/css/common.css';
</style>